<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
			费率绑定
		</view>
		<view class="show">
			<view class="sone">
				<view class="sonefoot">
					<view class="sfshang">
						{{list.projectName}}
					</view>
					<view class="sfxia">
						<view>创建时间：{{list.createTime}}</view>
						<view>项目地址：{{list.address}}</view>
					</view>
				</view>
			</view>
			<!-- <view class="stwo">
				<view class="stwohand">
					充电区名称
				</view>
				<input placeholder="请输入充电区的名称" v-model="name"/>
			</view> -->
			<view class="sthree">
				<view class="sthreehand">
					充电模式
				</view>
				<view class="sthreefoot">
					<view class="smont">
						<view class="sfleft">
							<view>常用</view>
							<van-switch :checked="type0" @change="cebtn(0)" />
						</view>
						<view class="sfright" v-if="type0==true">
							<span @click="xgbtn(onetap,0)">修改费率</span>
							<span @click="cebtn(0)" style="margin-left: 30upx;">更换套餐</span>
						</view>
					</view>
					<view class="smontwo" v-if="type0==true&&JSON.stringify(onetap)!='{}'">
						<view class="smleft">
							<view class="smshang">
								{{onetap.packageName}}
							</view>
							<view v-if="onetap.types=='B2'">
								<view class="smxia" v-for="(item1, index1) in onetap.steps" key="index1">
									{{item1.standard}}元/度
								</view>
							</view>
							<view v-if="onetap.types=='B5'">
								<view class="smxia" v-for="(item1, index1) in onetap.steps" key="index1">
									<div>费  率：{{item1.standard}}元/度</div>
									<div>服务费：{{item1.num}}元/度</div>
								</view>
							</view>
							<view v-if="onetap.types=='B1'">
								<view class="smxia" v-for="(item1, index1) in onetap.steps" key="index1"
									v-if="item1.minPower!=item1.maxPower">
									{{item1.minPower}}-{{item1.maxPower}}瓦-{{item1.standard}}元/时</view>
								<view class="smxia" v-for="(item1, index1) in onetap.steps" key="index1"
									v-if="item1.minPower==item1.maxPower">{{item1.minPower}}瓦以上-{{item1.standard}}元/时
								</view>
							</view>
							<view v-if="onetap.types=='B6'">
								<view class="smxia" v-for="(item1, index1) in onetap.steps" key="index1"
									v-if="item1.minPower!=item1.maxPower">
									{{item1.minPower}}-{{item1.maxPower}}瓦-{{item1.standard}}元/时</view>
								<view class="smxia" v-for="(item1, index1) in onetap.steps" key="index1"
									v-if="item1.minPower==item1.maxPower">{{item1.minPower}}瓦以上-{{item1.standard}}元/时
								</view>
							</view>
							<view v-if="onetap.types=='B3'">
								<view class="smxia" v-for="(item1, index1) in onetap.steps" key="index1"
									v-if="item1.minPower!=item1.maxPower">
									{{item1.minPower}}-{{item1.maxPower}}瓦-{{item1.standard}}元/次</view>
								<view class="smxia" v-for="(item1, index1) in onetap.steps" key="index1"
									v-if="item1.minPower==item1.maxPower">{{item1.minPower}}瓦以上-{{item1.standard}}元/次
								</view>
							</view>
							<view v-if="onetap.types=='B4'">
								<view class="smxia" v-for="(item1, index1) in onetap.steps" key="index1"
									v-if="item1.minPower!=item1.maxPower">
									{{item1.minPower}}-{{item1.maxPower}}瓦-1元/{{item1.standard}}小时</view>
								<view class="smxia" v-for="(item1, index1) in onetap.steps" key="index1"
									v-if="item1.minPower==item1.maxPower">{{item1.minPower}}瓦以上-1元/{{item1.standard}}小时
								</view>
							</view>
						</view>
						<view class="smright bscolor" v-if="onetap.types=='B1'">计时</view>
						<view class="smright blcolor" v-if="onetap.types=='B2'">计量</view>
						<view class="smright bccolor" v-if="onetap.types=='B3'">计次</view>
						<view class="smright bccolor" style="color:#ffaa00" v-if="onetap.types=='B4'">一元</view>
						<view class="smright bccolor" style="color:red" v-if="onetap.types=='B5'">计量2</view>
					</view>
				</view>

				<view class="sthreefoot" v-if="addNew==0">
					<view class="smont">
						<view class="sfleft">
							<view>包月</view>
							<van-switch :checked="type1" @change="cebtn(1)" />
						</view>
						<view class="sfright" v-if="type1==true">
							<span @click="xgbtn(twotap,1)">修改费率</span>
							<span @click="cebtn(1)" style="margin-left: 30upx;">更换套餐</span>
						</view>
					</view>
					<view class="smontwo" v-if="type1==true&&JSON.stringify(twotap)!='{}'">
						<view class="smleft">
							<view class="smshang">
								{{twotap.packageName}}
							</view>
							<view class="smxia" v-if="twotap.types=='A1'">
								{{twotap.monthStandard}}元/{{twotap.monthNum}}小时/月，加油包:
								{{twotap.comeStandard}}元{{twotap.comeNum}}小时
							</view>
							<view class="smxia" v-if="twotap.types=='A3'">
								{{twotap.monthStandard}}元/{{twotap.monthNum}}次/月，加油包:
								{{twotap.comeStandard}}元{{twotap.comeNum}}次
							</view>
							<view v-if="twotap.types!='A1'&&twotap.types!='A3'">
								<view class="smxia" v-for="(item1, index1) in twotap.steps" :key="index1+'a1'"
									v-if="item1.minPower!=item1.maxPower">
									{{item1.minPower}}-{{item1.maxPower}}瓦-{{item1.standard}}元</view>
								<view class="smxia" v-for="(item1, index1) in twotap.steps" :key="index1+'a2'"
									v-if="item1.minPower==item1.maxPower">{{item1.minPower}}瓦以上-{{item1.standard}}元
								</view>
							</view>
						</view>
						<view class="smright bscolor" v-if="twotap.types=='A1'">包时</view>
						<view class="smright bccolor" v-if="twotap.types=='A3'">包次</view>
						<view class="smright" style="color:#40D851;" v-if="twotap.types=='A4'">包总时</view>
						<view class="smright" style="color:#BC12ED;" v-if="twotap.types=='A5'">按天包时</view>
						<view class="smright" style="color:#0103FD;" v-if="twotap.types=='A6'">包总次</view>
						<view class="smright" style="color:#E40C00;" v-if="twotap.types=='A7'">按天包次</view>
						
					</view>
				</view>


				<view class="sthreefoot">
					<view class="smont">
						<view class="sfleft">
							<view>临时</view>
							<van-switch :checked="type2" @change="cebtn(2)" />
						</view>
						<view class="sfright" v-if="type2==true">
							<span @click="xgbtn(threetap,2)">修改费率</span>
							<span @click="cebtn(2)" style="margin-left: 30upx;">更换套餐</span>
						</view>
					</view>

					<view class="smontwo" v-if="type2==true&&JSON.stringify(threetap)!='{}'">
						<view class="smleft">
							<view class="smshang">
								{{threetap.packageName}}
							</view>
							<view class="smxia" v-for="(item1, index1) in threetap.steps" key="index1"
								v-if="item1.minPower!=item1.maxPower">
								{{item1.minPower}}-{{item1.maxPower}}瓦-{{item1.standard}}元/时</view>
							<view class="smxia" v-for="(item1, index1) in threetap.steps" key="index1"
								v-if="item1.minPower==item1.maxPower">{{item1.minPower}}瓦以上-{{item1.standard}}元/时
							</view>
						</view>
						<view class="smright bscolor" v-if="threetap.types=='C1'">计时</view>
					</view>

				</view>
			</view>
			<view class="sfour" @click="addcd">
				立即绑定
			</view>
			<van-popup :show="wshow" :close-on-click-overlay="false">
				<view class="tannei1">
					<view class="tnhand">
						<view class="tntxt">请选择一个费率</view>
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//close.png" @click="wshowclose"></image>
					</view>
					<view class="tnfoot">
						<view class="montlist">
							<van-radio-group v-model="radio1" @change='changebtn'>
								<view class="sone1" v-if="alist.length>0||blist.length>0||clist.length>0">
									<input v-model="flname" />
									<view class="sonefoot" @click="sbtn">
										<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//search.png"></image>
									</view>
								</view>
								<view class="mont" v-for="(item, index) in alist" key="index"
									v-if="active==0&&alist.length>0">
									<view class="montleft">
										<view v-if="item.types=='B2'">
											<view class="montshang">{{item.packageName}}</view>
											<view class="montxia">{{item.steps[0].standard}}元/度</view>
										</view>
										<view v-if="item.types=='B5'">
											<view class="montshang">{{item.packageName}}</view>
											<view class="montxia">费 率：{{item.steps[0].standard}}元/度</view>
											<view class="montxia">服务费：{{item.steps[0].num}}元/度</view>
										</view>
										<view v-if="item.types=='B1'">
											<view class="montshang">{{item.packageName}}</view>
											<view class="montxia" v-for="(item1, index1) in item.steps"
												key="index1" v-if="item1.minPower!=item1.maxPower">
												{{item1.minPower}}-{{item1.maxPower}}瓦-{{item1.standard}}元/时</view>
											<view class="montxia" v-for="(item1, index1) in item.steps"
												key="index1" v-if="item1.minPower==item1.maxPower">
												{{item1.minPower}}瓦以上-{{item1.standard}}元/时</view>
										</view>
										<view v-if="item.types=='B6'">
											<view class="montshang">{{item.packageName}}</view>
											<view class="montxia" v-for="(item1, index1) in item.steps"
												key="index1" v-if="item1.minPower!=item1.maxPower">
												{{item1.minPower}}-{{item1.maxPower}}瓦-{{item1.standard}}元/时</view>
											<view class="montxia" v-for="(item1, index1) in item.steps"
												key="index1" v-if="item1.minPower==item1.maxPower">
												{{item1.minPower}}瓦以上-{{item1.standard}}元/时</view>
										</view>
										<view v-if="item.types=='B3'">
											<view class="montshang">{{item.packageName}}</view>
											<view class="montxia" v-for="(item1, index1) in item.steps"
												key="index1" v-if="item1.minPower!=item1.maxPower">
												{{item1.minPower}}-{{item1.maxPower}}瓦-{{item1.standard}}元/次</view>
											<view class="montxia" v-for="(item1, index1) in item.steps"
												key="index1" v-if="item1.minPower==item1.maxPower">
												{{item1.minPower}}瓦以上-{{item1.standard}}元/次</view>
										</view>
										<view v-if="item.types=='B4'">
											<view class="montshang">{{item.packageName}}</view>
											<view class="montxia" v-for="(item1, index1) in item.steps"
												key="index1" v-if="item1.minPower!=item1.maxPower">
												{{item1.minPower}}-{{item1.maxPower}}瓦-1元/{{item1.standard}}小时</view>
											<view class="montxia" v-for="(item1, index1) in item.steps"
												key="index1" v-if="item1.minPower==item1.maxPower">
												{{item1.minPower}}瓦以上-1元/{{item1.standard}}小时</view>
										</view>
									</view>
									<view class="montright">
										<view class="mrtxt bscolor" v-if="item.types=='B1'">计时</view>
										<view class="mrtxt blcolor" v-if="item.types=='B2'">计量</view>
										<view class="mrtxt bccolor" v-if="item.types=='B3'">计次</view>
										<view class="mrtxt bccolor" style="color:#ffaa00" v-if="item.types=='B4'">一元
										</view>
										<view class="mrtxt bccolor" style="color:red" v-if="item.types=='B5'">计量2
										</view>
										<view class="mrtxt bccolor" style="color:red" v-if="item.types=='B6'">价费分离
										</view>
										<van-radio :name="item.packageId" />
									</view>
								</view>
								<view v-if="active==0&&alist.length==0" style="margin: 120upx 50upx; color: #007AFF;"
									@click="gopz">
									您目前还未配置费率，点此马上配置；
								</view>
								<view class="mont" v-for="(item, index) in clist" key="index"
									v-if="active==2&&clist.length>0">
									<view class="montleft">
										<view class="montshang">{{item.packageName}}</view>
										<view class="montxia" v-for="(item1, index1) in item.steps" key="index1"
											v-if="item1.minPower!=item1.maxPower">
											{{item1.minPower}}-{{item1.maxPower}}瓦-{{item1.standard}}元/时</view>
										<view class="montxia" v-for="(item1, index1) in item.steps" key="index1"
											v-if="item1.minPower==item1.maxPower">
											{{item1.minPower}}瓦以上-{{item1.standard}}元/时</view>
									</view>
									<view class="montright">
										<view class="mrtxt bscolor" v-if="item.types=='C1'">计时</view>
										<van-radio :name="item.packageId" />
									</view>
								</view>
								<view v-if="active==2&&clist.length==0" style="margin: 120upx 50upx; color: #007AFF;"
									@click="gopz">
									您目前还未配置费率，点此马上配置；
								</view>
								<view class="mont" v-for="(item, index) in blist" key="index"
									v-if="active==1&&blist.length>0">
									<view class="montleft">

										<view class="montshang">{{item.packageName}}</view>
										<view class="montxia" v-if="item.types=='A1'">
											{{item.monthStandard}}元/{{item.monthNum}}小时/月，加油包:
											{{item.comeStandard}}元{{item.comeNum}}小时
										</view>
										<view class="montxia" v-if="item.types=='A3'">
											{{item.monthStandard}}元/{{item.monthNum}}次/月，加油包:
											{{item.comeStandard}}元{{item.comeNum}}次
										</view>
										<view v-if="item.types!='A1'&&item.types!='A3'">
											<view class="montxia" v-for="(item1, index1) in item.steps"
												key="index1" v-if="item1.minPower!=item1.maxPower">
												{{item1.minPower}}-{{item1.maxPower}}瓦-{{item1.standard}}元</view>
											<view class="montxia" v-for="(item1, index1) in item.steps"
												key="index1" v-if="item1.minPower==item1.maxPower">
												{{item1.minPower}}瓦以上-{{item1.standard}}元</view>
										</view>

									</view>
									<view class="montright">
										<view class="mrtxt bscolor" v-if="item.types=='A1'">包时</view>
										<view class="mrtxt bccolor" v-if="item.types=='A3'">包次</view>
										<view class="mrtxt" style="color:#40D851;" v-if="item.types=='A4'">包总时</view>
										<view class="mrtxt" style="color:#BC12ED;" v-if="item.types=='A5'">按天包时</view>
										<view class="mrtxt" style="color:#0103FD;" v-if="item.types=='A6'">包总次</view>
										<view class="mrtxt" style="color:#E40C00;" v-if="item.types=='A7'">按天包次</view>
										<van-radio :name="item.packageId" />
									</view>
								</view>
								<view v-if="active==1&&blist.length==0" style="margin: 120upx 50upx; color: #007AFF;"
									@click="gopz">
									您目前还未配置费率，点此马上配置；
								</view>
							</van-radio-group>
						</view>
					</view>
				</view>
			</van-popup>

		</view>
	</view>
</template>

<script>
	// import {
	// 	Dialog
	// } from 'vant';
	export default {
		components: {},
		mounted() {

		},

		data() {
			return {
				showlist: [{
					name: '常用',
					type: false
				}, {
					name: '包月',
					type: false
				}, {
					name: '临时',
					type: false
				}],
				// checked: true,
				wshow: false,
				active: 0,
				areaId: '',
				radio1: '',
				projectId: '',
				list: {}, //小区详情
				alist: [], //常用费率列表
				blist: [], //包月费率列表
				clist: [], //临时费率列表
				onetap: {}, //常用费率数据
				twotap: {}, //包月费率数据
				threetap: {}, //临时费率数据
				commonId: '', //常用费率套餐id
				monthId: '', //包月费率套餐id
				tmpId: '', //临时费率套餐id
				type0: false,
				type1: false,
				type2: false,
				name: '', //充电区名
				flname: '', //费率名称
				addNew:0,
				areaType:0,
				isProportion:'',//运营商权限

			}
		},
		onLoad(options) {
			this.projectId = options.projectId
			this.areaId = options.areaId
			this.addNew = options.addNew
			this.areaType=options.areaType
			this.isProportion=options.isProportion
		},
		onShow() {
			this.main()
			this.showone()
			this.wshowclose()
		},
		methods: {
			//获取某一小区详情和总用户数等信息
			main() {
				let data = {
					projectId: this.projectId,
					needProjectMoney: 0,
					needProportion: 0
				}
				this.$base.request1('manager/project/statistics/', 'GET', data)
					.then(res => {
						this.list = res.data.data
					})
					.catch(err => {

					})
			},
			//获取一个充电区绑定的费率信息
			showone() {
				this.$base.request1('manager/area/pid' + '/' + this.areaId, 'GET')
					.then(res => {
						if (res.data.code == '200') {
							if (res.data.data.oftenList[0]) {
								this.$base.request1('manager/rate' + '/' + res.data.data.oftenList[0], 'GET')
									.then(res1 => {
										this.onetap = res1.data.data[0]
										this.commonId = res.data.data.oftenList[0]
										this.type0 = true
									})
									.catch(err => {

									})
							}
							if (res.data.data.monthlyList[0]) {
								this.$base.request1('manager/rate' + '/' + res.data.data.monthlyList[0], 'GET')
									.then(res1 => {
										this.twotap = res1.data.data[0]
										this.monthId = res.data.data.monthlyList[0]
										this.type1 = true
									})
									.catch(err => {

									})
							}
							if (res.data.data.temporaryList[0]) {
								this.$base.request1('manager/rate' + '/' + res.data.data.temporaryList[0], 'GET')
									.then(res1 => {
										this.threetap = res1.data.data[0]
										this.tmpId = res.data.data.temporaryList[0]
										this.type2 = true
									})
									.catch(err => {

									})
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: "error"
							});
						}
					})
					.catch(err => {

					})
			},
			//返回上一页
			blackbtn() {
				uni.navigateBack()
			},
			//跳转配置费率页面
			gopz() {
				if(this.isProportion=='1'){
					uni.navigateTo({
						url: '../rate_setting/rate_setting?projectId=' + this.projectId,
					});
				}else{
					uni.showToast({
						title: '您不是该小区的运营商，没有权限配置。',
						duration: 2000,
						icon: "error"
					});
				}
			},
			
			cebtn(vul) {
				let that = this;
				that.active = vul
				if (vul == 0) {
					that.type0 = !that.type0;
					if (that.type0 == true) {
						that.wshowopen();
					}
				} else if (vul == 1) {
					uni.showModal({
						title: '提示',
						content: '请尽量不要修改包月费率，否则可能会引起包月用户无法使用',
						success: function (res) {
							if (res.confirm) {
								that.type1 = !that.type1;
								if (that.type1 == true) {
									that.wshowopen();
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

				} else if (vul == 2) {
					that.type2 = !that.type2;
					if (that.type2 == true) {
						that.wshowopen();
					}
				}

			},
			//关闭弹窗
			wshowclose() {
				this.flname = ''
				if (JSON.stringify(this.onetap) == '{}') {
					this.type0 = false
				}
				if (JSON.stringify(this.twotap) == '{}') {
					this.type1 = false
				}
				if (JSON.stringify(this.threetap) == '{}') {
					this.type2 = false
				}
				this.wshow = false
			},
			//查询费率
			sbtn() {
				this.cxfl()
			},
			//费率列表
			cxfl() {
				uni.showLoading({
					title: '加载中',
				})
				let data = {
					packageName: this.flname,
					type: this.active
				}
				this.$base.request1('manager/rate/list' + '/' + this.projectId, 'GET', data)
					.then(res => {
						uni.hideLoading()
						if (this.active == 0) {
							this.alist = res.data.data.rows
						} else if (this.active == 1) {
							this.blist = res.data.data.rows
						} else if (this.active == 2) {
							this.clist = res.data.data.rows
						} else if (this.active == 6) {
							this.alist = res.data.data.rows
						}
					})
					.catch(err => {

					})
			},
			//打开弹窗
			wshowopen() {
				this.wshow = true
				this.cxfl()
			},
			//修改费率
			xgbtn(item, vul) {
				if (vul == 0) {
					uni.navigateTo({
						url: '../common_modification_rate/common_modification_rate?packageId=' + item.packageId +
							'&type=' + item.types+'&occNum='+this.areaType,
					});
				} else if (vul == 1) {
					if(item.types=='A1'||item.types=='A3'){
						uni.navigateTo({
							url: '../monthly_revised_rate/monthly_revised_rate?packageId=' + item.packageId +
								'&type=' + item.types+'&occNum='+this.areaType,
						});
					}else{
						uni.navigateTo({
							url: '../new_monthly_revised_rate/new_monthly_revised_rate?packageId=' + item.packageId +
								'&type=' + item.types+'&occNum='+this.areaType,
						});
					}
					
				} else if (vul == 2) {
					uni.navigateTo({
						url: '../temporary_modification_rates/temporary_modification_rates?packageId=' + item
							.packageId + '&type=' + item.types+'&occNum='+this.areaType,
					});
				}
			},
			changebtn(event) {
				var radio1 = event.detail;
				this.radio1 = radio1;
				this.$base.request1('manager/rate' + '/' + radio1, 'GET')
					.then(res => {
						if (this.active == 0) {
							this.onetap = res.data.data[0]
							this.commonId = this.radio1
						} else if (this.active == 1) {
							this.twotap = res.data.data[0]
							this.monthId = this.radio1
						} else if (this.active == 2) {
							this.threetap = res.data.data[0]
							this.tmpId = this.radio1
						}
						this.wshow = false
					})
					.catch(err => {

					})
			},
			//添加充电区
			addcd() {
				uni.showLoading({
					title: '请稍候',
					mask: true
				})
				if (this.type0 == false) {
					this.commonId = ''
					this.onetap = {}
				}
				if (this.type1 == false) {
					this.monthId = ''
					this.twotap = {}
				}
				if (this.type2 == false) {
					this.tmpId = ''
					this.threetap = {}
				}
				let data = {
					commonId: this.commonId,
					monthId: this.monthId,
					tmpId: this.tmpId,
				}

				this.$base.request1('manager/area/rate' + '/' + this.areaId, 'PUT', data)
					.then(res => {
						if (res.data.code == '200') {
							uni.hideLoading()
							uni.showToast({
								title: '修改成功',
								duration: 2000,
							});
							uni.navigateBack()
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: "error"
							});
						}
					})
					.catch(err => {

					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;

		.hand {
			width: 100%;
			background-color: #4B98ED;
			height: 62upx;
			font-size: 30upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 62upx;
			color: #ffffff;
			position: relative;

			image {
				width: 22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 11upx;
			}
		}

		.show {
			width: 100%;
			box-sizing: border-box;

			//包时字体颜色
			.bscolor {
				color: #F041CC;
			}

			//包次字体颜色
			.bccolor {
				color: #4B98ED;
			}

			//包量字体颜色
			.blcolor {
				color: #4BED79;
			}

			.sone {
				width: 100%;
				height: 250upx;
				background-color: #4b98ED;
				margin-bottom: 38upx;
				position: relative;

				.sonefoot {
					position: absolute;
					width: 686upx;
					height: 200upx;
					border-radius: 8upx;
					box-shadow: 0upx 2upx 9upx 0upx rgba(22, 22, 22, 0.1);
					background-color: #FFFFFF;
					left: 32upx;
					top: 81upx;
					box-sizing: border-box;
					padding: 34upx 21upx;

					.sfshang {
						font-size: 32upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.sfxia {
						margin-top: 30upx;
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #333333;
						line-height: 41upx;
					}
				}
			}

			.stwo {
				width: 100%;
				box-sizing: border-box;
				padding: 44upx 32upx;

				.stwohand {
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #333333;
				}

				input {
					width: 100%;
					height: 60upx;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #999999;
					box-sizing: border-box;
					padding: 10upx 30upx;
					border-bottom: 1upx solid #dedede;
					margin-top: 30upx;
				}
			}

			.sthree {
				width: 100%;
				box-sizing: border-box;
				padding: 0 33upx;
				margin-bottom: 20upx;
				margin-top: 70upx;

				.sthreehand {
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #333333;

				}

				.sthreefoot {
					width: 686upx;
					// height: 88upx;
					border-radius: 8upx;
					box-shadow: -1upx 4upx 9upx 0upx rgba(66, 66, 66, 0.27);
					margin-top: 20upx;

					.smont {
						width: 100%;
						height: 88upx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.sfleft {
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #333333;
							align-items: center;
							line-height: 88upx;
							display: flex;
							box-sizing: border-box;
							padding-left: 29upx;

							// margin-top: 16upx;
							/deep/.van-switch {
								margin-left: 16upx;
							}
						}

						.sfright {
							font-size: 24upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #666666;
							margin-right: 23upx;
						}
					}

					.smontwo {
						width: 100%;
						display: flex;
						border-top: 1upx solid #cacaca;
						justify-content: space-between;
						box-sizing: border-box;
						padding: 25upx;
						align-items: center;

						.smleft {
							.smshang {
								font-size: 28upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								color: #333333;
								width: 500upx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.smxia {
								font-size: 24upx;
								font-family: PingFang SC Medium, PingFang SC Medium-Medium;
								font-weight: 500;
								color: #666666;
								margin-top: 20upx;
							}
						}

						.smright {
							font-size: 24upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							// color: #4b98ed;
						}
					}
				}
			}

			.sfour {
				width: 686upx;
				height: 88upx;
				border-radius: 8upx;
				box-shadow: -1upx 6upx 9upx 0upx rgba(75, 152, 237, 0.3);
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				text-align: left;
				color: #ffffff;
				text-align: center;
				line-height: 88upx;
				margin: 30upx auto;
				background-color: #4B98ED;
			}

			/deep/.van-popup--center {
				border-radius: 16upx !important;
			}

			.tannei1 {
				width: 686upx;
				background-color: #FFFFFF;

				.tnhand {
					width: 100%;
					height: 64upx;
					background-color: #4B98ED;
					align-items: center;
					position: fixed;
					top: 0upx;

					.tntxt {
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #ffffff;
						line-height: 64upx;
						text-align: center;
						position: relative;
					}

					image {
						width: 25upx;
						height: 25upx;
						position: absolute;
						top: 19upx;
						right: 18upx;
					}
				}

				.tnfoot {

					/deep/.van-tab {
						font-size: 32upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #999999;
					}

					/deep/.van-tab--active {
						font-size: 32upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #4b98ed;
					}

					/deep/.van-tabs__line {
						background-color: #4B98ED !important;
					}

					.montlist {
						width: 100%;
						box-sizing: border-box;
						padding: 0 26upx;
						margin-bottom: 31upx;

						.sone1 {
							width: 650upx;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							margin: 32upx auto;
							margin-top: 100upx;

							input {
								width: 562upx;
								height: 64upx;
								border: 1upx solid #b0b0b0;
								padding-left: 20upx;
							}

							.sonefoot {
								width: 101upx;
								height: 68.5upx;
								background-color: #4B98ED;
								text-align: center;
								box-sizing: border-box;
								padding-top: 13upx;

								image {
									width: 39upx;
									height: 40upx;
								}
							}
						}

						.mont {
							width: 100%;
							box-sizing: border-box;
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-bottom: 1upx solid #e3e3e3;
							padding: 24upx;

							.montleft {
								.montshang {
									font-size: 28upx;
									font-family: PingFang SC Bold, PingFang SC Bold-Bold;
									font-weight: 700;
									color: #333333;
									width: 400upx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.montxia {
									font-size: 24upx;
									font-family: PingFang SC Medium, PingFang SC Medium-Medium;
									font-weight: 500;
									color: #666666;
									margin-top: 10upx;
								}
							}

							.montright {
								display: flex;

								.mrtxt {
									margin-right: 20upx;
									margin-bottom: 8upx;
								}

							}
						}
					}
				}
			}
		}

	}
</style>
